<template>
  <div class="tab-control">
       <div  v-for="(item,index) in titles" :key="index" @click="clickItem(index)"><span :class="{active:currentIndex === index}">{{item}}</span></div>
  </div>
</template>

<script>
export default {
   name:"TabControl",
   data(){
     return {
       currentIndex:0//记录当前索引
     }
   },
   props:{
     titles:{
       type:Array,
       default(){
         return []
       }
     },
     tabIndex:{
       type:Number,
       default:0
     }
   },
   methods:{
     clickItem(index){
       this.currentIndex = index
       this.$emit('tabClick',index)
     }
   },
  watch:{
    tabIndex(newVal,oldVal){
      this.currentIndex = newVal
    }
  }
}
</script>

<style>
  .tab-control {
    width: 100%;
    display: flex;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #fff;
    z-index: 999;
    font-size: 16px;
  }

 .tab-control div {
   flex: 1;
 }
 
 .tab-control span {
    display: inline-block;
    padding: 0 10px;
    cursor: pointer;
 }

 .active {
    color: var(--color-high-text);
    border-bottom: 2px solid var(--color-high-text);
  }

</style>